<template>
	<view>
		<view class="revenueRecordsNav ">

			<sunui-navbar :items="tabList" lineHeight="100rpx" :isCenter="true" :currentIndex="navIndex" padding="20rpx"
				activeColor="rgb(255, 0, 0)" :size="150" activeLineBg="rgb(255, 0, 0)" textAlign="center"
				activeLineWidth="100%" activeDirection="space-between" activeLineHeight="4rpx" bgColor="#fff"
				:margin="10" @change="getChange"></sunui-navbar>
			<view class="search-content" v-if="isSHowSearch">

				<image class="search-img" src="../../static/会员卡商城加套餐卡/组合 405.png" mode=""></image>
				<input placeholder="搜索您想要的订单" v-model="searchVal" @input="changeInput" @confirm="changeSearch"
					style="width: auto;line-height: 1em; " placeholder-style="font-size:28rpx;color:#A1A1A1;" />
				<image v-if="searchVal" class="icon_close" src="/static/delect.png" @click="close"></image>
			</view>

			<view class="pointHead flex-start-center flex-between">
				<!-- <view class="activeMonth flex" @click="payType()" v-if="isShowPay">
				
					<text>{{name}}</text>
					<uni-icons type="right" color='#333' size="14"></uni-icons>
				</view> -->
				<view class="month flex" @click="payType()">

				</view>
				<!-- 订单状态 -->
				<view class="selectTime flex-align-center">

					<view v-for="(item, index) in orderStatusArr" :key="index">
						<view v-if="!(navIndex==1&&index==2)" :class="[currentIndex == index ? 'active' : 'tab']"
							@click="switchTimeTab(index)">
							{{ item.value }}
						</view>
					</view>
				</view>

			</view>
			<sunui-popup ref="modifyEmployeeInfo">
				<template v-slot:content>

					<view class="moreActiveButton">
						<view class="delete" @click.stop="rechargeStatus(undefined,'全部')">
							全部
						</view>
						<view class="add" @click.stop="rechargeStatus('1','微信在线充值')">
							微信在线充值
						</view>
						<view class="add" @click.stop="rechargeStatus('2','微信线下充值')">
							微信线下充值
						</view>
						<view class="add" @click.stop="rechargeStatus('3','支付宝充值')">
							支付宝充值
						</view>

						<view class="add" @click.stop="rechargeStatus('4','现金充值')">
							现金充值
						</view>
						<view class="add" @click.stop="rechargeStatus('5','pos 充值')">
							pos 充值
						</view>
						<view class="add" @click.stop="rechargeStatus('6','微信线上扫码充值')">
							微信线上扫码充值
						</view>
						<view class="add" @click.stop="rechargeStatus('7','支付宝在线扫码充值')">
							支付宝在线扫码充值
						</view>

					</view>

				</template>
			</sunui-popup>
			<!-- 记录列表 -->
			<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
				@up="upCallback" :up="upOption" :down="downOption">
				<block v-for="(item,index) in list" :key="index">
					<view class="recordsContainer" v-if="navIndex==0">

						<view class="recordsList" v-if="currentIndex==2">

							<view class="flex-between">
								<view class="flex-start-center">

									<view class="flex-columns" style="margin-left: 20rpx;">
										<text
											style=" font-size: 32rpx;font-weight: 400;margin-bottom: 10rpx;">{{orderRechargeFn(item.type)}}</text>
										<text
											style="color: rgb(153, 153, 153);margin-bottom: 10rpx;">订单号：{{item.sn_order}}</text>

										<text style="color: rgb(153, 153, 153);">赠送金额：{{item.give_amount}}<text
												style="margin-left: 20rpx;">{{payStatusTypeFn(item.status)}}</text></text>

									</view>
								</view>
								<view class="flex-column-end " style="height: 90rpx;">
									<text class="font-weight_bold "
										style=" font-size: 32rpx; color: red;">+{{item.amount}}</text>
									<text style="color: rgb(153, 153, 153);;">{{item.create_time}}</text>
								</view>
							</view>


						</view>

						<view v-if="currentIndex==1">


							<view class="recordsList">

								<view class="flex-between">
									<view class="flex-start-center">

										<view class="flex-columns" style="margin-left: 20rpx;height: 90rpx;">
											<text
												style="font-size: 32rpx;font-weight: 400;">{{orderStatusFn(item.mode_type)}}</text>

										</view>

									</view>
									<view class="flex-column-end " style="height: 90rpx;">
										<text class="font-weight_bold "
											style=" font-size: 32rpx; color: red;">{{item.type==1?'+':'-'}}{{currentIndex==1?item.num:item.amount}}</text>
										<text style="color: rgb(153, 153, 153);;">{{item.create_time}}</text>
									</view>
								</view>


							</view>


						</view>
						<view v-if="currentIndex==0">


							<view class="recordsList">

								<view class="flex-between">
									<view class="">

										<view class="flex-columns" style="margin-left: 20rpx;height: 150rpx;">
											<text
												style="font-size: 28rpx;font-weight: 400;">支付类型：{{payTypeFn(item.pay_type )}}</text>
											<text
												style="font-size: 28rpx;font-weight: 400;">余额操作：{{operateTypeFn(item.operate_type)}}</text>
											<text
												style="font-size: 28rpx;font-weight: 400;">支付方式：{{payFn(item.pay_method)}}</text>


										</view>

									</view>
									<view class="flex-column-end " style="height: 150rpx;">
										<text class="font-weight_bold "
											style=" font-size: 32rpx; color: red;">{{item.type==1?'+':'-'}}{{currentIndex==1?item.num:item.amount}}</text>
										<view class="">赠送金额：<text class="font-weight_bold "
												style=" font-size: 32rpx; color: red;">{{item.give_amount}}</text>
										</view>
										<text style="color: rgb(153, 153, 153);;">{{item.create_time}}</text>
									</view>
								</view>


							</view>


						</view>

					</view>
					<view class="recordsContainer" v-else>
						<view v-if="currentIndex==0">


							<view class="recordsList">

								<view class="flex-between">
									<view class="">

										<view class="flex-columns" style="margin-left: 20rpx;height: 150rpx;">
											<text
												style="font-size: 28rpx;font-weight: 400;">支付类型：{{payTypeFn(item.pay_type )}}</text>
											<text
												style="font-size: 28rpx;font-weight: 400;">余额操作：{{operateTypeFn(item.operate_type)}}</text>
											<text
												style="font-size: 28rpx;font-weight: 400;">支付方式：{{payFn(item.pay_method)}}</text>


										</view>

									</view>
									<view class="flex-column-end " style="height: 150rpx;">
										<text class="font-weight_bold "
											style=" font-size: 28rpx; color: red;">{{item.type==1?'+':'-'}}{{currentIndex==1?item.num:item.amount}}</text>
										<text style="color: rgb(153, 153, 153);;">{{item.create_time}}</text>
									</view>
								</view>


							</view>


						</view>
						<!-- <view class="flex-between" v-if="currentIndex==0">
							<view class="flex-start-center">

								<view class="flex-columns" style="margin-left: 20rpx;height: 90rpx;">
									<text
										style=" font-size: 32rpx;font-weight: 400;">{{operateTypeFn(item.operate_type)}}</text>
									<text style="color: rgb(153, 153, 153);;">支出金额：{{item.amount}}元</text>
								</view>
							</view>
							<view class="flex-column-end " style="height: 90rpx;">
								<text class="font-weight_bold " style=" font-size: 32rpx;">{{item.total_amount}}</text>
								<text style="color: rgb(153, 153, 153);;">{{item.create_time}}</text>
							</view>
						</view> -->
						<view class="recordsList" v-if="currentIndex==1">

							<view class="flex-between">
								<view class="flex-start-center">

									<view class="flex-columns" style="margin-left: 20rpx;height: 90rpx;">
										<text
											style="font-size: 28rpx;font-weight: 400;">{{orderStatusFn(item.mode_type)}}</text>

									</view>
								</view>
								<view class="flex-column-end " style="height: 90rpx;">
									<text class="font-weight_bold "
										style=" font-size: 28rpx; color: red;">{{item.type==1?'+':'-'}}{{item.num}}</text>
									<text style="color: rgb(153, 153, 153);;">{{item.create_time}}</text>
								</view>
							</view>


						</view>

					</view>
				</block>

			</mescroll-body>

		</view>

	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				name: '支付方式',
				downOption: {
					auto: true
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				token: uni.getStorageSync('login').token,
				windowHeight: '',

				navIndex: 0,
				currentIndex: 0,
				isShowPay: true,
				tabList: [{
					name: '充值记录',
					id: '1' //null
				}, {
					name: '支出记录',
					id: '2' //null
				}, ],
				currentTime: '2',
				yeartime: currentDate.split('-')[0],
				//选择的月份
				monthtime: currentDate.split('-')[1],
				//选择的天数
				daytime: currentDate.split('-')[2],
				orderStatusArr: [{
						value: '财务'
					},
					{
						value: '积分'
					},
					{
						value: '充值订单 '
					},

				],
				list: [],
				date: null,
				type: undefined,
				searchVal:'',
				isSHowSearch:false
			}
		},
		onLoad() {

		},
		onShow() {
			this.mescroll?.resetUpScroll();
		},
		methods: {
			getChange(index) {
				this.isSHowSearch=false
				console.log(index)
				this.navIndex = index
				if (this.navIndex == 1) {
					this.currentIndex = 0
				}
				this.mescroll?.resetUpScroll();
			},
			changeInput(e){
				console.log(e.detail.value)
				this.searchVal=e.detail.value
				this.mescroll?.resetUpScroll();
			},
			switchTimeTab(index) {
                console.log(index)
				this.isSHowSearch=false
				this.currentIndex = index;
				if (index == 1) {
					this.isShowPay = false
				}else if(index == 2) {
					this.isShowPay = true
					this.isSHowSearch=true
				} else {
					this.isShowPay = true
				}
				this.mescroll?.resetUpScroll();

			},
			async upCallback(scroll) {

				if (this.navIndex == 0) {
					if (this.currentIndex == 0) {
						const result = await this.$http.post({
							url: this.$api.balance,
							data: {
								page: scroll.num,
								limit: 10,
								type: 1

							},
							headers: {
								'Authorization': `Bearer ${this.token}`
							}

						})
						if (result.code == 0) {
							console.log('地址管理列表', result);
							this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count,
								10));
							if (scroll.num == 1) this.list = [];
							this.list = this.list.concat(result.data.list);
							console.log('this.list', this.list, this.list.length);
						}
					} else if (this.currentIndex == 1) {
						const result = await this.$http.post({
							url: this.$api.integralLog,
							data: {
								page: scroll.num,
								limit: 10,
								type: this.navIndex == 0 ? 1 : 2
							},
							headers: {
								'Authorization': `Bearer ${this.token}`
							}

						})
						if (result.code == 0) {
							console.log('地址管理列表', result);
							this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count,
								10));
							if (scroll.num == 1) this.list = [];
							this.list = this.list.concat(result.data.list);
							console.log('this.list', this.list, this.list.length);
						}

					} else {

						const result = await this.$http.post({
							url: this.$api.rechargeOrderList,
							data: {
								page: scroll.num,
								limit: 10,
								status: 3,
								type: 0,
								sn_order:this.searchVal
							},
							headers: {
								'Authorization': `Bearer ${this.token}`
							}

						})
						if (result.code == 0) {
							console.log('地址管理列表', result);
							this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count,
								10));
							if (scroll.num == 1) this.list = [];
							this.list = this.list.concat(result.data.list);
							console.log('this.list', this.list, this.list.length);
						}

					}
				} else if (this.navIndex == 1) {
					if (this.currentIndex == 0) {
						const result = await this.$http.post({
							url: this.$api.balance,
							data: {
								page: scroll.num,
								limit: 10,
								type: 2
							},
							headers: {
								'Authorization': `Bearer ${this.token}`
							}

						})
						if (result.code == 0) {
							console.log('地址管理列表', result);
							this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count,
								10));
							if (scroll.num == 1) this.list = [];
							this.list = this.list.concat(result.data.list);
							console.log('this.list', this.list, this.list.length);
						}
						// const result = await this.$http.post({
						// 	url: this.$api.expenditure,
						// 	data: {
						// 		page: scroll.num,
						// 		limit: 10,

						// 	},
						// 	headers: {
						// 		'Authorization': `Bearer ${this.token}`
						// 	}

						// })
						// if (result.code == 0) {
						// 	console.log('地址管理列表', result);
						// 	this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count,
						// 		10));
						// 	if (scroll.num == 1) this.list = [];
						// 	this.list = this.list.concat(result.data.list);
						// 	console.log('this.list', this.list, this.list.length);
						// }
					} else {
						const result = await this.$http.post({
							url: this.$api.integralLog,
							data: {
								page: scroll.num,
								limit: 10,
								type: this.navIndex == 0 ? 1 : 2
							},
							headers: {
								'Authorization': `Bearer ${this.token}`
							}

						})
						if (result.code == 0) {
							console.log('地址管理列表', result);
							this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count,
								10));
							if (scroll.num == 1) this.list = [];
							this.list = this.list.concat(result.data.list);
							console.log('this.list', this.list, this.list.length);
						}
					}




				}
			},
			// 日期获取
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;

				return `${year}-${month}-${day}`;

			},

			bindDateChange(e) {


				this.createTime = e.detail.value
				this.date = e.target.value;
				/* 在上面声明变量，split是用来截取字段*/
				this.yeartime = this.date.split('-')[0];
				this.monthtime = this.date.split('-')[1];
				this.daytime = this.date.split('-')[2];


			},

			payType() {
				this.$refs.modifyEmployeeInfo.show({
					anim: 'bottom',
					position: 'bottom',
					shadeClose: true, //false使用户不能点击其它关闭页面
					topclose: false
				});

			},
			rechargeStatus(type, name) {
				this.type = type
				this.name = name
				this.mescroll?.resetUpScroll();
				this.$nextTick(() => {
					this.$refs.modifyEmployeeInfo.close()
				})
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
			currentTimeFn() {
				return function(currentIndex) {
					if (currentIndex == '1') {
						// 日
						return 'day';

					} else if (currentIndex == '2') {
						// 月
						return 'month';
					} else if (currentIndex == '3') {
						// 年
						return 'year';
					}
				};
			},
			orderStatusFn: function() {
				return function(status) {

					let orderStatus = '';
					// status订单状态（0.待付款 1.待接单 2.已接单 3.服务中 4.已完成 5.已取消/退款)
					orderStatus =
						status == 0 ? '购买商品积分抵扣' : status == 1 ? '购买商品积分抵扣' : status == 2 ? '签到' : status == 3 ?
						'积分提现' :
						status == 4 ? '购买商品获得积分' : status == 5 ? '购买套餐卡获取积分' : status == 6 ? '手动' : status == 7 ?
						'商品退款' : '收银台消费';
					return orderStatus;
				};
			},
			orderRechargeFn: function() {
				return function(status) {

					let orderStatus = '';
					// status订单状态（0.待付款 1.待接单 2.已接单 3.服务中 4.已完成 5.已取消/退款)
					orderStatus =
						status == 0 ? '微信在线充值' : status == 1 ? '微信在线充值' : status == 2 ? '微信线下充值' : status == 3 ?
						'支付宝充值' :
						status == 4 ? '现金充值' : status == 5 ? 'pos 充值' : status == 6 ? '微信线上扫码充值' : '支付宝在线扫码充值';
					return orderStatus;
				};
			},
			operateTypeFn: function() {
				return function(status) {
					let orderStatus = '';
					// status订单状态（0.待付款 1.待接单 2.已接单 3.服务中 4.已完成 5.已取消/退款)
					// orderStatus =
					//   status == 1 ? '余额充值' : status == 2 ? '购买商品' : '购买套餐 ';

					orderStatus =
						status == 1 ? '微信在线充值余额' : status == 2 ? '微信线下扫码充值' : status == 3 ? '支付宝线下充值余额' : status ==
						4 ?
						'现金充值余额' : status == 5 ? 'pos机充值余额' : status == 6 ? '微信在线扫码充值余额' : status == 7 ?
						'支付宝在线扫码充值余额' :
						status == 8 ? '微信在线购买商品' : status == 9 ? '余额购买商品' : status == 10 ? '微信在线购买套餐卡' : status ==
						11 ? '余额购买套餐卡' :
						status == 12 ? '微信线下购买套餐卡' : status == 13 ? '支付宝线下购买套餐卡' : status == 14 ? '现金购买套餐卡' :
						status == 15 ? 'pos购买套餐卡' :
						status == 16 ? '微信在线扫码购买套餐卡' : status == 17 ? '支付宝在线扫码购买套餐卡' : status == 18 ?
						'微信在线购买商品退款' : status == 19 ? '余额购买商品退款' :
						status == 20 ? '手动操作余额' : status == 21 ? '余额线下消费' : status == 22 ? '微信线下消费' : status ==
						23 ? '支付宝线下消费' : status == 24 ? '现金线下消费' : status == 25 ?
						'pos线下消费' : status == 26 ? '微信在线消费' : '支付宝在线消费';
					return orderStatus;
				};
			},
			payStatusTypeFn: function() {
				return function(status) {

					let orderStatus = '';
					// status订单状态（0.待付款 1.待接单 2.已接单 3.服务中 4.已完成 5.已取消/退款)
					orderStatus =
						status == 1 ? '待支付' : status == 2 ? '支付成功' : '已完成'
					return orderStatus;
				};
			},

			payTypeFn: function() {
				return function(status) {
					let orderStatus = '';
					// status订单状态（0.待付款 1.待接单 2.已接单 3.服务中 4.已完成 5.已取消/退款)
					orderStatus =
						status == 0 ?
						'线上' :
						status == 1 ?
						'线上扫码' :
						status == 2 ?
						'线下' :
						status == 3 ?
						'在线充值' :
						'余额'
					return orderStatus;
				};
			},
			payFn: function() {
				return function(status) {
					let orderStatus = '';
					// status订单状态（0.待付款 1.待接单 2.已接单 3.服务中 4.已完成 5.已取消/退款)
					orderStatus =
						status == 0 ?
						'微信' :
						status == 1 ?
						'微信' :
						status == 2 ?
						'支付宝' :
						status == 3 ?
						'现金' :
						status == 4 ?
						'余额' :
						'pos机';
					return orderStatus;
				};
			},
			changeFn: function() {
				return function(status) {
					let orderStatus = '';
					// status订单状态（0.待付款 1.待接单 2.已接单 3.服务中 4.已完成 5.已取消/退款)
					orderStatus =
						status == 0 ?
						'支付' :
						status == 1 ?
						'支付' :
						status == 2 ?
						'提现' :
						status == 3 ?
						'退款' :
						'手动';
					return orderStatus;
				};
			},




		},
	}
</script>

<style lang="less" scoped>
	.flex-center() {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	page {
		background: #f6f6f6;
	}

	.moreActiveButton {


		background-color: #fff;


		.add {
			height: 100rpx;
			color: #6568F6;
			font-size: 28rpx;
			font-family: Inter;

			.flex-center();
			border: 1px solid #f7f7f7;


		}

		.delete {
			.flex-center();
			height: 100rpx;


			color: #FF4636;
			font-size: 28rpx;
			font-family: Inter;
			box-shadow: 2rpx 2rpx 2rpx 30rpx 30rpx rgba(238, 238, 238, 1.0);
		}


	}

	.revenueRecordsNav {

		height: 50px;
		background: rgb(255, 255, 255);

		.search-content {
			justify-content: center;
			display: flex;
			align-items: center;
			
			height: 88rpx;
			margin: 30rpx  0rpx  0rpx  0rpx;
			background: #fff;
			border-radius: 84rpx;
         

			.search-img {
				width: 30rpx;
				height: 30rpx;
				margin-right: 20rpx;
				margin-left: 40rpx;
			}

			.icon_close {
				padding: 0rpx 15rpx;
				width: 36rpx;
				height: 36rpx;
				margin-right: 30rpx;
			}
		}

		.pointHead {
			padding: 50rpx 20rpx;

			.activeMonth {

				// width: 85px;
				padding: 0 15rpx;
				height: 56rpx;
				border-radius: 200rpx;
				background: #E7E7E7;
				color: #fff;
				text-align: center;
				line-height: 28px;
				color: #333;
			}

			.month {
				width: 152rpx;
				height: 56rpx;

			}

			.selectTime {

				.tab {
					margin-left: 20rpx;
					list-style-type: none;
					display: block;
					// width: 108rpx;
					padding: 0 10rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					background: rgb(235, 234, 234);

				}

				.active {
					// width: 108rpx;
					height: 50rpx;
					padding: 0 10rpx;
					background: rgb(232, 202, 148);
					;
					margin-left: 20rpx;
					color: rgb(122, 85, 32);
					text-align: center;
					line-height: 50rpx;
				}

				.orderStatus {
					width: 90px;
					height: 50rpx;
					text-align: center;
					line-height: 50rpx;
					font-weight: 700;

				}




			}

		}

		.recordsContainer {
			padding: 40rpx 20rpx;
			background-color: #fff;

			.recordsList {
				padding-bottom: 30rpx;

				border-bottom: 1px solid rgb(236, 235, 235);

				.avatar {
					width: 44px;
					height: 44px;
				}
			}
		}

	}
</style>